import "./index.css"
import "../../style/index.css"
import * as echarts from "echarts"
import api from "../../api"
export default {
    template:`
        <div class="scatterPageBox wh-100">
            <div class="scatter flex-1"> 
                <div class="scatter-1 center"> 散点图</div>
                <div class="scatter-2 wh-100"> </div>
            </div>
            <div class="radar flex-1">
                <div class="radar-1 center"> 雷达图</div>
                <div class="radar-2 wh-100"> </div>
            </div>
        </div>
    `,
    echartsScatter:null,
    echartsRadar:null,
    // 初始化散点图
    async initScatter(){
        const data = await api.jsonServer.getScatter()
        
        
        const d =data.map(item =>{
            return [parseFloat(item.x),parseFloat(item.y)]
        })
        var chartDom = document.querySelector('.scatter .scatter-2');
        this.echartsScatter = echarts.init(chartDom);
        

        const option = {
            xAxis: {},
            yAxis: {},
            series: [
                {
                symbolSize: 20,
                data: d,
                type: 'scatter',
                }
            ]
            };

        this.echartsScatter.setOption(option);

    },

    async initRadar(){
        const res = await api.jsonServer.getGrade();
        console.log(res)

        const dict = {
            'math':"数学",
            'chinese':"语文",
            'english':"英语",
            'physics':"物理",
            'chemistry':"化学",
            'biology':"生物",
        };

        const indicator = res?.scores?.map((d)=>({
            name:dict[d.subject],
            max:d.max_score,
        }))
        const chartDom = document.querySelector('.radar .radar-2');
        this.echartsRadar = echarts.init(chartDom);
        

        const option = {
        title: {
            text: 'Basic Radar Chart'
        },
        legend: {
            data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
            // shape: 'circle',
            indicator,
        },
        series: [
            {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
                {
                value: res?.scores?.map((d) => d.actual_score),
                name:res?.name,
                },  
            ]
            }
        ]
        };

        this.echartsRadar.setOption(option);

    },
    mounted(){
        this.initScatter();
        this.initRadar();
    },
    destroyed() {
        this.echartsScatter.dispose();
        this.echartsRadar.dispose();
      }

}